<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/index/index.css">
    <script src="/public/jQuery.min.js"></script>
    <link rel="stylesheet" href="/public/swiper-bundle.min.css">
    <!-- jq -->
    <script src="/public/jQuery.min.js"></script>
    <!-- jq -->
    <title>首页</title>
</head>

<body>
<div id="index">
    <div class="header">
        <header>
            {include file="component/header" /}
        </header>
        <div class="searcho">
            <div class="seacontent">
                <input type="text" placeholder="输入你想去的地方" class="seainput">
                <button class="seabut">
                    <img src="/img/pcindex/search.png" alt="" class="seabutimg">
                    <p class="seatit"><a href="#">搜索</a></p>
                </button>
            </div>
        </div>
    </div>
    <div class="index">
        <!-- 热门活动 -->
        <div class="activeo">
            <div class="titlebox">
                <p class="title-tit">热门活动</p>
                <p class="title-p">ACTIVITIES</p>
            </div>
            <div class="actbutbox">
                {foreach name="activity_type" item="v"}
                <button class="tab-button" data-tab="tab{$v.id}" onclick="openTab('tab{$v.id}')">{$v.title}</button>
                {/foreach}
            </div>
            <!-- 选项卡内容 -->
            {foreach name = "activity_type" item = "v"}
            <div class="tab" id="tab{$v.id}">
                <div class="actimgbox">
                    {foreach name="activity" item="vo"}
                    {if condition="$vo.type_id == $v.id"}
                    <div class="actimg">
                        <img src="{$vo.image}" alt="">
                    </div>
                    {/if}
                    {/foreach}
                </div>
            </div>
            {/foreach}

            <!-- 选项卡内容 -->
        </div>
        <!-- 热门活动 -->
        <!-- 目的地 -->
        <div class="bourn">
            <div class="titlebox">
                <p class="title-tit">推荐的目的地</p>
                <p class="title-p">ACTIVITIES</p>
            </div>
            <!-- 目的地选项卡内容 -->

            {foreach name = "recommend_type" item = "v"}
            <div class="rolltab" id="rolltab{$v.id}">
                {foreach name="recommend_banner" item="vv"}
                {if condition="$vv.type_id == $v.id"}
                <div class="bouimgbox">
                    <img src="{$vv.image}" alt="" class="lala">
                    <div class="overlay">
                        <div class="ovetit"><a href="#">开启你的梦想之旅吧</a></div>
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
            {/foreach}
            <!-- 目的地选项卡内容 -->
            <!-- 目的按钮 -->
            <div class="boubutbox">
                {foreach name="recommend_type" item = "v"}
                <button class="bountbut active" data-tab="rolltab{$v.id}" onclick="openroll('rolltab{$v.id}')">{$v.title}</button>
                {/foreach}
            </div>
            <!-- 目的按钮 -->
        </div>
        <!-- 目的地 -->
        <!-- 新闻 -->
        <div class="news">
            <div class="titlebox">
                <p class="title-tit">推荐的目的地</p>
                <p class="title-p">ACTIVITIES</p>
            </div>
            <div class="newscontent">
                {foreach name="recommend" item = "v"}
                <div class="newsbox">
                    <p class="newsp">{$v.title}</p>
                    <img src="{$v.image}" alt="" class="newsimg">
                    <p class="newstext">{$v.content}</p>
                </div>
                {/foreach}
            </div>
        </div>
        <!-- 新闻 -->
        <!-- 营友圈 -->
        <div class="firendcircle">
            <div class="titlebox">
                <p class="title-tit">营友圈</p>
                <p class="title-p">ACTIVITIES</p>
            </div>
            {foreach name = "yyq" item = "v"}
            <div class="fcbox">
                <div class="fcleft">
                    <img src="{$v.image}" alt="">
                </div>
                <div class="fcright">
                    <div class="fcrtop">
                        <div class="fcintro">
                            <p class="fcname">{$v.title}</p>
                            <p class="fctime">{$v.create_time}</p>
                        </div>
                        <button id="followButton{$v.id}" class="guan">+关注</button>
                    </div>
                    <p class="fctext">
                        {$v.abs}
                    </p>
                    <div class="fcrbot">
                        <div class="zan">
                            <img src="/img/telindex/fenxiang.png" alt="">
                            <p>{$v.share}</p>
                        </div>
                        <div class="zan">
                            <img src="/img/telindex/pinglun.png" alt="">
                            <p>{$v.like}</p>
                        </div>
                        <div class="zan">
                            <img src="/img/telindex/dianzan.png" alt="">
                            <p>{$v.comment}</p>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
        <!-- 营友圈 -->
        <!-- 装备 -->
        <div class="equip">
            <div class="titlebox">
                <p class="title-tit">找装备</p>
                <p class="title-p">ACTIVITIES</p>
            </div>
            <div class="equipbox">
                {include file="component/swiper" /}
            </div>
        </div>
        <!-- 装备 -->
    </div>
    <div class="footer">
        <footer>
            {include file="component/footer" /}
        </footer>
    </div>
</div>

<script>
    // 选项卡切换
    function openTab(tabName) {
        var tabs = document.getElementsByClassName("tab");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].style.display = "none";
        }

        var buttons = document.getElementsByClassName("tab-button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove("active");
        }

        document.getElementById(tabName).style.display = "block";
        document.querySelector(".tab-button[data-tab='" + tabName + "']").classList.add("active");
    }

    // 初始显示第一个选项卡
    openTab("tab1");

    // 选项卡切换
    // 选项卡切换
    function openroll(tabName) {
        var rolltabs = document.getElementsByClassName("rolltab");
        for (var i = 0; i < rolltabs.length; i++) {
            rolltabs[i].style.display = "none";
        }

        var rollbuttons = document.getElementsByClassName("rollbut");
        for (var i = 0; i < rollbuttons.length; i++) {
            rollbuttons[i].classList.remove("active");
        }

        document.getElementById(tabName).style.display = "block";
        document.querySelector(".rollbut[data-tab='" + tabName + "']").classList.add("active");
    }

    // 初始显示第一个选项卡
    openroll("rolltab1");

    // 选项卡切换

    // 关注
    // 获取按钮元素
    var followButton1 = document.getElementById('followButton1');
    var followButton2 = document.getElementById('followButton2');
    var guan = document.getElementsByClassName('.guan');

    // 初始状态为未关注
    var isFollowing1 = false;
    var isFollowing2 = false; // 假设第二个按钮初始状态是已关注

    // 设置按钮文本和点击事件处理程序
    function toggleFollowStatus1() {
        if (isFollowing1) {
            followButton1.textContent = '+ 关注';
            isFollowing1 = false;
        } else {
            followButton1.textContent = '已关注';
            isFollowing1 = true;
            guan.style.backgroundColor = '#FFC528';
        }
    }

    function toggleFollowStatus2() {
        if (isFollowing2) {
            followButton2.textContent = '+ 关注';
            isFollowing2 = false;
        } else {
            followButton2.textContent = '已关注';
            isFollowing2 = true;
            guan.style.backgroundColor = '#FFC528';
        }
    }

    // 初始时添加点击事件处理程序
    followButton1.addEventListener('click', toggleFollowStatus1);
    followButton2.addEventListener('click', toggleFollowStatus2);
    // 关注

</script>
</body>

</html>
